<template>
  <view class="search-result">
    <u-search
      :show-action="true"
      actionText="搜索"
      :animation="true"
      placeholder="搜索疫苗、疾病"
      v-model="keyword"
      @search="searchKeyword"
      @custom="searchKeyword"
    ></u-search>
    <u-loading-icon text="加载中" textSize="18" v-if="loading"></u-loading-icon>

    <view class="search-list" v-if="!loading">
      <VaccineItem
        v-for="item in searchResult"
        :key="item.vaccine_id"
        :itemData="{
          id:item.vaccine_id,
          name: item.vaccine_name,
          species: item.vaccine_species,
          introduction: item.vaccine_ingredients,
        }"
      />
    </view>
  </view>
</template>

<script>
import { searchVaccine } from "@/api";
import VaccineItem from "@/components/vaccineItem";
export default {
  data() {
    return {
      loading: false,
      keyword: "",
      searchResult: [],
    };
  },

  components: { VaccineItem },

  async mounted() {
    this.loading = true;
    let keyword = this.$scope.options.keyword;
    this.keyword = keyword;
    console.log(keyword);
    let result = await searchVaccine(keyword);
    this.searchResult = result.data;
    this.loading = false;
  },

  methods: {
    async searchKeyword(value) {
      this.loading = true;
      let result = await searchVaccine(value);
      this.searchResult = result.data;
      this.loading = false
    },

    
  },
};
</script>

<style lang='scss' scoped>
.search-result {
  padding: 40rpx;
  .search-list {
    margin-top: 30rpx;
  }
}
</style>